<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <title>Document</title>
    <style>
        #login-div {
            width: 500px;
            height: 500px;
            border: 1px solid #ff5d39;
            position: relative;
        }

        h1 {
            text-align: center;
        }

        .input {
            height: 50px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin: 20px auto;
            color: #ccc;
            line-height: 50px;
            text-align: left;
        }

        .input-left {
            border-right: 1px solid #ccc;
            text-align: center;
            width: 100px;
            display: inline-block;
        }

        .login-btn {
            /*margin: 0 auto;*/
            display: inline-block;
            width: 160px;
            height: 50px;
            background-color: #4BC065;
            color: #fff;
            line-height: 50px;
            text-align: center;
            border-radius: 6px;
        }

        #captcha-box {
        }
    </style>

</head>

<body>
    <!-- 验证码存放的div块 -->
    <div id="captcha-box"></div>

    <div id="login-div">
        <!-- 装载验证码的DIV -->

        <h1>用户登录</h1>
        <div class="input">
            <span class="input-left">用户名</span>
            <input type="text" name="username" value="123456">
        </div>
        <div class="input">
            <span class="input-left">密码</span>
            <input type="text" name="password" value="123456">
        </div>
        <div class="login-btn" type="HONEYCOMB_IMAGE_CLICK">登录(图标点选)</div>
        <div class="login-btn" type="SCRAPE">登录(刮刮卡)</div>
        <div class="login-btn" type="WORD_ORDER_IMAGE_CLICK">登录(语序点选)</div>
        <div class="login-btn" type="IMAGE_CLICK">登录(图标点选2)</div>
        <div class="login-btn" type="ROTATE_DEGREE">登录(旋转角度)</div>
        <div class="login-btn" type="ROTATE">登录(旋转)</div>
        <div class="login-btn" type="CONCAT">登录(拼接)</div>
        <div class="login-btn" type="WORD_IMAGE_CLICK">登录(汉字点选)</div>
        <div class="login-btn" type="SLIDER">登录(滑块拼图)</div>
        <div class="login-btn" type="CURVE">登录(曲线)</div>
        <div class="login-btn" type="JIGSAW">登录(乱序拼图)</div>
        <div class="login-btn" type="SLIDER2">登录(滑块拼图)</div>
        <div class="login-btn" type="one-stage">登录(单阶段验证)</div>
    </div>

    <script>
        // 英文
        var us = {
            tips_success: "Verification successful",
            tips_error: "Validation failed",
            tips_4001: "try again",
            image_click_title: "Select in this order:",
            scrape_title_before: "Drag slider display",
            scrape_title_after: "let go",
            word_order_image_title: "Click on the text in word order",
            rotate_degree_title: "Drag the slider to make the angle positive",
            slider_title: "Slide to complete the puzzle",
            concat_title: "Slide to complete the puzzle",
            rotate_title: "Slide to complete the puzzle",
            image_click_title_size: "16px",
            word_order_image_title_size: "18px",
            rotate_degree_title_size: "14px",
        }
        // 德文
        var de = {
            tips_success: "Überprüfung erfolgreich",
            tips_error: "Validierung fehlgeschlagen",
            tips_4001: "Versuchen Sie es erneut",
            image_click_title: "In dieser Reihenfolge auswählen:",
            scrape_title_before: "Schieberegleranzeige ziehen",
            scrape_title_after: "lass los",
            word_order_image_title: "Klicken Sie auf den Text in Wortreihenfolge",
            rotate_degree_title: "Ziehen Sie den Schieberegler, um den Winkel positiv zu machen",
            slider_title: "Schieben Sie, um das Puzzle zu vervollständigen",
            concat_title: "Schieben Sie, um das Puzzle zu vervollständigen",
            rotate_title: "Schieben Sie, um das Puzzle zu vervollständigen",
            image_click_title_size: "9px",
            word_order_image_title_size: "13px",
            rotate_degree_title_size: "9px",
            scrape_title_size: "10px",
            slider_title_size: "12px",
            concat_title_size: "12px",
            rotate_title_size: "12px",

        }
        // 中文,使用系统自带
        var zh = null

        $(function () {
            // TAC.enc.rsaPublicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC0nf3XQxOCL59bUEno36+d0PoGu82WDaeN6vYzlO5p5JOttGIuw0BLjXjJhpKrwU41tmYVygr+t3+y2GAgavEy2R+RSWCYgLEwpi8xjeV5ZfAWORYILF2YuZsG+276HapgQYxajzUlnHrO+En6LJ9sUglg9VTQNnawwKD6/cy8IQIDAQAB";
            $(".login-btn").click(function () {
                // $('#captcha-box').css({'display':'flex',background:'rgba(0,0,0,.5)'})
                let type = $(this).attr("type");
                let oneStage = false;
                if (type === "one-stage") {
                    type = "SLIDER";
                    oneStage = true;
                }
                let host = 'http://localhost:8083';
                // host='https://trace.fkdex.com'
                const config = {
                    // requestCaptchaDataUrl: "http://39.106.76.116:8081/gen?type="+type,
                    // validCaptchaUrl: "http://39.106.76.116:8081/validation",
                    requestCaptchaDataUrl: host + '/tCaptcha/gen?type='+type,
                    validCaptchaUrl: host + '/tCaptcha/check',
                    // requestCaptchaDataUrl: "http://localhost:8080/open/captcha/behavioral?type="+type,
                    // validCaptchaUrl: "http://localhost:8080/open/captcha/behavioral/check",
                    bindEl: "#captcha-box",
                    // bindEl: document.body,
                    validRequestBody: {
                        mailNo: "123456",
                    },
                    // genRequestBody: {
                    //     username: "zhangsan",
                    //     password: "123456",
                    // },
                    // 关闭按钮回调事件
                    btnCloseFun: (el, tac) => {
                        console.log("关闭按钮触发事件...")
                        tac.destroyWindow();
                        // $('#captcha-box').css('display','none')
                    }
                }

                if (oneStage) {
                    // 添加自定义请求参数
                    config.validRequestBody = {
                        username: "zhangsan",
                        password: "123456",
                    }
                }

                const style= {
                    // 不传默认为中文
                    // btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",
                    // bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",
                    // logoUrl: "https://minio.tianai.cloud/public/static/captcha/images/logo.png",
                    moveTrackMaskBgColor: "#409eff",
                    moveTrackMaskBorderColor: "#ef9c0d",
                    i18n: zh,
                    // i18n: us
                }
                var tac = new TAC(config,style);
                // tac.config.addRequestChain({
                //     preRequest(t, requestParam){
                //         if ("validCaptcha"=== t) {
                //             let data = requestParam.data? requestParam.data:requestParam;
                //             // 转为时间戳
                //             data.startSlidingTime = data.startSlidingTime.getTime();
                //             data.endSlidingTime = data.endSlidingTime.getTime();
                //         }
                //     }
                // })
                // tac.config.addRequestChainByString("cl>json>rsaaes>base64");
                tac.init();
            });

            // 全局配置RSA公钥， 最好自己重新生成一份， 该行代码最好用JS进行加密, 全局设置一次即可
            //TAC.enc.rsaPublicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC0nf3XQxOCL59bUEno36+d0PoGu82WDaeN6vYzlO5p5JOttGIuw0BLjXjJhpKrwU41tmYVygr+t3+y2GAgavEy2R+RSWCYgLEwpi8xjeV5ZfAWORYILF2YuZsG+276HapgQYxajzUlnHrO+En6LJ9sUglg9VTQNnawwKD6/cy8IQIDAQAB";
            // 样式配置
            // const config = {
            //     requestCaptchaDataUrl: "http://localhost:8083/gen?type=CONCAT",
            //     validCaptchaUrl: "http://localhost:8083/check3",
            //     bindEl: "#captcha-box",
            //     chainString: "cl>json>rsaaes>base64"
            // }
            // var tac = new TAC(config);
            // // tac.config.addRequestChain({
            // //     preRequest(t, requestParam){
            // //         if ("validCaptcha"=== t) {
            // //             let data = requestParam.data? requestParam.data:requestParam;
            // //             // 转为时间戳
            // //             data.startSlidingTime = data.startSlidingTime.getTime();
            // //             data.endSlidingTime = data.endSlidingTime.getTime();
            // //         }
            // //     }
            // // })
            // // tac.config.addRequestChainByString("cl>json>rsaaes>base64");
            // tac.init();
        });
    </script>

<!--    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
<!--    <script>-->
<!--        // VConsole 默认会挂载到 `window.VConsole` 上-->
<!--        var vConsole = new window.VConsole();-->
<!--    </script>-->
</body>

</html>
